import * as Cesium from "cesium";

export default class MousePositon {
  constructor(viewer) {
    // 监听鼠标移动事件
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    this.divDom = document.createElement("div");
    this.divDom.style.cssText = `
      position:fixed;
      z-index:100;
      right:0;
      bottom:0;
      width:200px;
      height:50px;
      color:#fff;
      font-size:14px;
      line-height:50px;
      text-align:center;
      background-color:rgba(0,0,0,0.5);
    `;
    document.body.appendChild(this.divDom);
    handler.setInputAction((movement) => {
      // 获取椭球体经纬度坐标
      const cartesian = viewer.camera.pickEllipsoid(
        movement.endPosition,
        viewer.scene.globe.ellipsoid
      );
      if (cartesian) {
        // 转换为经纬度
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        // 获取经度
        const longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        // 获取纬度
        const latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        this.divDom.innerHTML = `经度:${longitudeString.toFixed(
          2
        )} 纬度:${latitudeString.toFixed(2)}`;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }
}
